<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>新增管理员</title>
		<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
	</head>
	<body>
	<form class="layui-form" action="">
		<div class="mainBox">
			<div class="main-container">
				<div class="layui-form-item">
					<label class="layui-form-label">角色名</label>
					<div class="layui-input-inline">
						<input type="text" name="title" lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" id="test">
					<label class="layui-form-label">权限范围</label>             
						{volist name="menus" id="vo1"}
							<ul class="layui-input-block" style="margin-top: 10px ;">
								<li>
									<input type="checkbox" name="rules" class="parent"  lay-skin="primary" data-level="{$vo1.level}" value="{$vo1.id}" title="【{$vo1.title}】">
									<ul>
								{if condition="isset($vo1['children'])"}
									{volist name="vo1['children']" id="vo2"}
									<li>
										{if condition="isset($vo2['children'])"}
										<input type="checkbox" name="rules" class="parent"  lay-skin="primary" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：">
											
											{volist name="vo2['children']" id="vo3"}
												<input type="checkbox" name="rules"  lay-skin="primary" id="{$vo3.id}" data-level="{$vo3.level}" value="{$vo3.id}" title="{$vo3.title}">
											{/volist}
											
										{else /}
										<input type="checkbox" name="rules" lay-skin="primary" id="{$vo2.id}" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：">
										{/if}
									</li>	
									{/volist}
								{/if}
									</ul>
								</li>
							</ul>
						{/volist}
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">具体描述</label>
					<div class="layui-input-block">
						<textarea type="text" name="descr" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
					lay-filter="user-save">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
				<button type="reset" class="pear-btn pear-btn-sm">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</div>
	</form>

	<script src="/static/component/layui/layui.js"></script>
	<script src="/static/component/pear/pear.js"></script>
	<script>
		// 数据接口
		const AUTHGROUP_ADD = "{:url('system.AuthGroup/add')}";

		layui.use(['form', 'jquery'], function() {
			let form = layui.form;
			let $ = layui.jquery;

			form.on('checkbox()', function(data){
				//var pc =  data.elem.classList; //获取选中的checkbox的class属性
				var othis = $(data.elem);
				var level = $(data.elem).attr('data-level');

				//选择
				if(data.elem.checked==true){

				//主菜单
					if(level === '0'){
						var c =$(data.elem).siblings().find("input[type='checkbox']");
						c.each(function(){
							var e = $(this); 
							e.next().addClass("layui-form-checked");
						});
					
					}
					//子菜单及子项
					if(level === '1'){		
						var c = $(data.elem).siblings("input[type='checkbox']");
						c.each(function(){
							var e = $(this); 
							e.next().addClass("layui-form-checked");
					});
					
					$(data.elem).parent().parent().prev().addClass("layui-form-checked");
							
					}
					
					//子项
					if(level === '2'){

						$(data.elem).siblings('div:first').addClass("layui-form-checked");
						$(data.elem).parent().parent().prev().addClass("layui-form-checked");			
					}
									
				} else {
				//取消

					if(level === '0'){
						var c =$(data.elem).siblings().find("input[type='checkbox']");
						c.each(function(){
							var e = $(this); 
							e.next().removeClass("layui-form-checked");
						});
					
					}

				if(level === '1'){
						var c = $(data.elem).siblings("input[type='checkbox']");
						c.each(function(){
							var e = $(this); 
							e.next().removeClass("layui-form-checked");
					});
					//子项为0，菜单取消选择
					var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
						if(s.length === 0){
							$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
						}
							
					}
					
					//子项
					if(level === '2'){	
						var t = othis.siblings('div .layui-form-checked');
						if(t.length == 1){
							$(data.elem).siblings('div:first').removeClass("layui-form-checked");
						}
						//子项为0，菜单取消选择
						var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
						if(s.length === 0){
							$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
						}			
					}
				}
			}); 

			form.on('submit(user-save)', function(data) {
				//checkbox 父子级级联或取id
				var mId = "";
				var e = $(":checkbox");
				e.each(function () {
				if($(this).next().hasClass("layui-form-checked")){
					mId+=$(this).val()+",";
				};
				})
				data.field.rules = mId.substring(0,mId.length-1);	

				$.ajax({
					url: AUTHGROUP_ADD,
					data: JSON.stringify(data.field),
					dataType: 'json',
					contentType: 'application/json',
					type: 'post',
					success: function(result) {
						if (result.code === 0) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							}, function() {
								parent.layer.close(parent.layer.getFrameIndex(window
									.name)); //关闭当前页
								parent.layui.table.reload("role-table");
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
					}
				})
				return false;
			});

		})
	</script>
</body>
</html>